import React, { useState } from 'react';
import {
    StyleSheet,
    Platform,
} from 'react-native';
import { TabView, TabBar } from 'react-native-tab-view';
import Introduction from './introduction';
import List from './list';


function Tab(props) {
    const { panRef, tapRef, nativeRef, onScrollDrag, onItemPress } = props;
    const [routes, setRoutes] = useState([
        { key: 'introduction', title: '简介' },
        { key: 'albums', title: '节目' },
    ]);
    const [index, setIndex] = useState(1)

    const onIndexChange = (index) => {
        setIndex(index);
    };
    const renderScene = ({ route }) => {

        switch (route.key) {
            case 'introduction':
                return <Introduction />;
            case 'albums':
                return (
                    <List
                        panRef={panRef}
                        tapRef={tapRef}
                        nativeRef={nativeRef}
                        onScrollDrag={onScrollDrag}
                        onItemPress={onItemPress}
                    />
                );
        }
    };
    const renderTabBar = (props) => {
        return (
            <TabBar
                {...props}
                scrollEnabled
                tabStyle={styles.tabStyle}
                labelStyle={styles.label}
                style={styles.tabbar}
                indicatorStyle={styles.indicator}
            />
        );
    };
    return (
        <TabView
            navigationState={{
                routes,
                index
            }}
            onIndexChange={onIndexChange}
            renderScene={renderScene}
            renderTabBar={renderTabBar}
        />
    );
}

const styles = StyleSheet.create({
    tabStyle: {
        width: 80,
    },
    label: {
        color: '#333',
    },
    tabbar: {
        backgroundColor: '#fff',
        ...Platform.select({
            android: {
                elevation: 0,
                borderBottomColor: '#e3e3e3',
                borderBottomWidth: StyleSheet.hairlineWidth,
            },
        }),
    },
    indicator: {
        backgroundColor: '#eb6d48',
        borderLeftWidth: 20,
        borderRightWidth: 20,
        borderColor: '#fff',
    },
});

export default Tab;
